<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./v4.6.5-dist/ol.css">
    <title>geo</title>
    <script src="./v4.6.5-dist/ol.js"></script>
    <style>
        #main {
            width: 100%;
            height: 80%;
        }
    </style>
    <!--<script src="geoJson.js"></script>-->
    <script src="./geoJson.js"></script>
</head>
<body>
<div id="main">

</div>
<span>features个数</span>
<button onclick="hiling()">点击高亮</button>
<button onclick="diling()">点击高亮</button>
<script>


    //    ------------------------------------------------------------------------------------
    /*    var image = new ol.style.Circle({
     radius: 5,
     fill: null,
     stroke: new ol.style.Stroke({color: 'red', width: 1})
     });

     var a = [115.74848777200009, 40.513730578000036];

     var b = ol.proj.transform(a, 'EPSG:4326', 'EPSG:3857')*/

    //    console.log(a);
    //    console.log(b);


    /* var arr = [
     [
     [
     [
     115.74848777200009,
     40.513730578000036
     ],
     [
     115.7490580970001,
     40.51376505600007
     ],
     [
     115.74981013900003,
     40.51365864400003
     ],
     [
     115.75090137000007,
     40.513547946000074
     ]
     ]
     ]
     ];*/
    //    CESHI.data[0].geojson.coordinates
    //    console.log(arr[0][0]);
    /* var yy = CESHI.data,
     bb = [],
     cc = [];
     for (var i = 0; i < yy.length; i++) {
     bb[i] = yy[i].geojson.coordinates[0][0].map((e => {
     return ol.proj.transform(e, 'EPSG:4326', 'EPSG:3857')
     }))

     cc.push(bb);
     }*/
    //    console.log(cc);

    //    var cs = [
    //        [
    //            [
    //                [-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]
    //            ]
    //        ],
    //        [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
    //    ];

    //    console.log(cs);

    //    let bb = CESHI.data[0].geojson.coordinates[0][0].map((e => {
    //
    //        return ol.proj.transform(e, 'EPSG:4326', 'EPSG:3857')
    //    }))
    //
    //    var xx = [
    //        [
    //            [bb]
    //        ]
    //    ]
    //    console.log(xx);
    //    var styles = {
    //        'MultiPolygon': new ol.style.Style({
    //            stroke: new ol.style.Stroke({
    //                color: 'yellow',
    //                width: 1
    //            }),
    //            fill: new ol.style.Fill({
    //                color: 'rgba(255, 255, 0, 0.1)'
    //            })
    //        }),
    //        'Point': new ol.style.Style({
    //            image: new ol.style.Circle({
    //                radius: 5,
    //                fill: new ol.style.Fill({
    //                    color: 'pink'
    //                }),
    //                stroke: new ol.style.Stroke({
    //                    color: 'green',
    //                    size: 1
    //                })
    //            })
    //        }),
    //    };


    var styleFunction = function () {
        return function (feature, resolution) {
            if (feature.getGeometry().getType() == 'Point') {
                var point = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 5,
                        fill: new ol.style.Fill({
                            color: feature.get("fillColor")
                        }),
                        stroke: new ol.style.Stroke({
                            color: feature.get("borderColor"),
                            size: 1
                        })
                    })
                })
                return [point]
            }
            if (feature.getGeometry().getType() == 'MultiPolygon') {
                var MultiPolygon = new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: feature.get('borderColor'),
                        width: feature.get("size")
                    }),
                    fill: new ol.style.Fill({
                        color: feature.get("fillColor")
                    }),
                    text: new ol.style.Text({
                        font: '12px Calibri,sans-serif',
                        text: feature.get('text'),
                        fill: new ol.style.Fill({
                            color: feature.get('color')
                        }),
                        stroke: new ol.style.Stroke({
                            color: 'white',
                            width: 2
                        })
                    })
                })
                return [MultiPolygon]
            }

        }
    }


    /*    var styleFunction = function (feature) {
     //        return styles[feature.getGeometry().getType()];




     };*/

    var geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
            'type': 'name',
            'properties': {
                'name': 'EPSG:4326'
            }
        },
        'features': []
    };

    var vectorSource = new ol.source.Vector({
        features: (new ol.format.GeoJSON(
            {
                defaultDataProjection: 'EPSG:4326',
                featureProjection: 'EPSG:3857'
            }
        )).readFeatures(geojsonObject)
    });

    //
    //    {
    //        "id": "400",
    //        "properties": {"name": "你好", 'color': "wawa"},
    //        'type': 'Feature',
    //        'geometry': {
    //        'type': 'Point',
    //            'coordinates': a
    //    }
    //    },


    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction()
    });

    var basemap = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}"
        })
    })
    var map = new ol.Map({
        target: "main",
        layers: [basemap,
            vectorLayer
        ],
        view: new ol.View({
            center: ol.proj.transform([116.38, 39.90], 'EPSG:4326', 'EPSG:3857'),
            zoom: 6
        })
    })


    var sources = vectorLayer.getSource();

    CESHI.data.forEach((e => {
        sources.addFeatures(
            (new ol.format.GeoJSON({
                defaultDataProjection: 'EPSG:4326',
                featureProjection: 'EPSG:3857'
            })).readFeatures({
                "id": e.id,
                "properties": {
                    "name": e.name,
                    "borderColor": "#1FB456",
                    "fillColor": "yellow",
                    "size": 1,
                    "text": ""
                },
                'type': 'Feature',
                'geometry': e.geojson
            }))
//        console.log(e.geojson);
    }))


//    vectorSource.getFeatureById("480").set("name", "哈哈");
//    vectorSource.getFeatureById("486").set("fillColor", "green");
//    vectorSource.getFeatureById("484").set("fillColor", "pink");
//    vectorSource.getFeatureById("485").set("fillColor", "red");



//    for(var i=0;i<)



    /*var geo = vectorSource.getFeatureById("485").getGeometry();

    var points = geo.getInteriorPoints().getFirstCoordinate();

    var point = new ol.Feature({
        geometry: new ol.geom.Point(points)
    })
    point.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'red'
            }),
            stroke: new ol.style.Stroke({
                color: 'green',
                size: 1
            })
        })
    }));
    vectorLayer.getSource().addFeature(point);*/


    function hiling() {
        vectorSource.getFeatureById("484").set("size", 5);
        vectorSource.getFeatureById("484").set("text", "点击设置样式");

        if (vectorSource.getFeatureById("484").getGeometry().getType() == 'LineString') {
            var leng = Math.abs(vectorSource.getFeatureById("484").getGeometry().getLength());
            if (leng > 1000) {
                leng = leng / 1000 + 'km';
//            unit = 'km';
            } else {
                leng = leng + 'm';
            }

            console.log(leng);
        }

        if (vectorSource.getFeatureById("484").getGeometry().getType() == 'MultiPolygon') {
            var area = Math.abs(vectorSource.getFeatureById("484").getGeometry().getArea());
//            if (area > 1000000) {
//                area = area / 1000000 + 'km²';
//            } else {
                area = area + 'm²';
//            }

            console.log(area);
        }

    }

    function diling() {
        vectorSource.getFeatureById("484").set("size", 1);
        vectorSource.getFeatureById("484").set("text", "");
    }

    map.on({
        'click': function () {
            console.log("sjdh");
        }
    });
    //    vectorLayer
    //    ------------------------------------------------------------------------------------


</script>
</body>
</html>